<template>
<div class="alert alert-primary" role="alert"  >
  <div class="text-center"><b>台球厅人员与设备管理系统</b></div>
</div>
<!-- 

 <div class="radio-inputs">
  <label class="radio">
    <input type="radio" name="radio" checked="" />
    <span class="name"><router-link to="/home">首页</router-link></span>
  </label>
  <label class="radio">
    <input type="radio" name="radio" />
    <span class="name"><router-link to="/report">公告</router-link></span>
  </label>

  <label class="radio">
    <input type="radio" name="radio" />
    <span class="name"><router-link to="/pool">球桌</router-link></span>
  </label>
  <label class="radio">
    <input type="radio" name="radio" />
    <span class="name"><router-link to="/ball">预约管理</router-link></span>
  </label>
  <label class="radio">
    <input type="radio" name="radio" />
    <span class="name"><router-link to="/leave">留言板</router-link></span>
  </label>
  <label class="radio">
    <input type="radio" name="radio" />
    <span class="name"><router-link to="/PersonCenter">个人中心</router-link></span>
  </label> -->
 







 <div class="app-container"> 

   <!-- to=""哪个就显示那个路由 -->
    
     <router-link to="/home">首页</router-link>&nbsp;&nbsp;
    <router-link to="/report">公告</router-link>&nbsp;&nbsp;
    
    <router-link to="/pool">球桌</router-link>&nbsp;&nbsp;
    <router-link to="/ball">预约管理</router-link>&nbsp;&nbsp;
    <router-link to="/leave">留言板</router-link>&nbsp;&nbsp;
    <router-link to="/PersonCenter">个人中心</router-link> 
    <!-- <div class="right-buttons"> -->
    <button @click="goBackHome()"  style="float: right" class="btnnn  btn-outline-dark">·进入后台·</button>
<button @click="logout()" style="float: right" class="btnnn  btn-outline-dark">
    ·退出登录·
  </button> 
   
 </div> 
   
<hr />
  
  
</template>

<script>
import { http } from "../utils/http.js";
export default {
  methods: {
    logout() {
      http.post("/logout").then((res) => {
        if (res.status === 200) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        }

      });
    },
    goBackHome(){
      this.$router.push('/backFront');
    
  }

// goBackHome() {  
//   const user = JSON.parse(sessionStorage.getItem("user"));  
//   if (user && user.part === 1) {  
//     this.$router.push('/backFront');  
//   } else {  
//     alert("您无权进入后台");  
//     this.$router.push("/login");  
//   }  
// },

//  logout() {  
//       http.post("/logout").then((res) => {  
//         if (res.status === 200) {  
//           sessionStorage.removeItem("token");  
//           sessionStorage.removeItem("userPart"); // 移除用户权限信息  
//           this.$router.push("/login");  
//         }  
//       });  
//     },  


  //   goBackHome() {  
  //     const userPart = sessionStorage.getItem("userPart"); // 获取用户权限信息  
  //     if (userPart === '1') {  
  //       this.$router.push('/backFront'); // 有权进入后台  
  //     } else {  
  //       alert("您无权进入后台，请联系管理员！"); // 无权进入后台，给出提示  
  //       this.$router.push('/login'); // 重定向到登录页面  
  //     }  
  //   }  
  // }  

  }

  }

</script>

<style scoped>
.app-container {
  text-align: center;
  font-size: 18px;
  font-weight: bold; /* 设置字体加粗 */ 
  letter-spacing: 3px; /* 设置字间距为2像素 */ 
}
.app-container a {
  padding: 10px;
  color: #000;
}
.app-container a.router-link-active {
  color: #fff;
  background-color: #1b4226;
}
/* 更改路由链接激活项的类名 */
/* .app-container .router-active{
  color: #fff;
  background-color: #999;
} */


.btnnn{
  
  width: 150px; /* 设置按钮宽度为80px */
  font-size: 20px;
  color: #0f0505;
  letter-spacing: 5px; /* 设置字间距为2px */
  background: none;
  border: none; /* 消除边框 */
}








/* 导航栏 */
.radio-inputs {
  position: relative;
  display: flex;
  border-radius: 0.5rem;
  background-color: #7d865f;
  box-sizing: border-box;
  font-size: 14px;
  width: 100%;
  padding: 1rem 1rem 0 1rem;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0.8rem;
  color: ;
  transition: all 0.15s ease-in-out;
  position: relative;
}

.radio-inputs .radio input:checked + .name {
  background-color: #e8e8e8;
  font-weight: 600;
}
.radio-inputs .radio input + .name:hover {
  color: #fff;
}
.radio-inputs .radio input:checked + .name:hover {
  color: #1d1d29;
}

.radio-inputs .radio input:checked + .name::after,
.radio-inputs .radio input:checked + .name::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #70c489;
  bottom: 0;
}

.radio-inputs .radio input:checked + .name::after {
  right: -10px;
  border-bottom-left-radius: 300px;
  box-shadow: -3px 3px 0px 3px #e8e8e8;
}
.radio-inputs .radio input:checked + .name::before {
  left: -10px;
  border-bottom-right-radius: 300px;
  box-shadow: 3px 3px 0px 3px #e8e8e8;
}




/* 导航栏内文字样式调整 */  
.radio-inputs .radio .name {  
  font-size: 20px; /* 设置字号为 25px */  
  letter-spacing: 1px; /* 设置字间距为 1 像素 */  
  color: #000; /* 设置字体颜色为黑色 */  
  /* 其他样式保持不变 */  
  display: flex;  
  cursor: pointer;  
  align-items: center;  
  justify-content: center;  
  border-top-left-radius: 0.5rem;  
  border-top-right-radius: 0.5rem;  
  border: none;  
  padding: 0.5rem 0.8rem;  
  transition: all 0.15s ease-in-out;  
  position: relative;  
}  
  

/* 2后台按钮 */
  .right-buttons {  
    display: flex;  
    justify-content: flex-end; /* 将内容对齐到右侧 */  
    padding-top: 10px; /* 根据需要调整顶部内边距 */  
  }  
  
  .right-buttons .btnnn {  
    margin-left: 10px; /* 如果需要，在两个按钮之间添加一些间距 */  
  }  
</style>